<template>
<div class="LoginViewBody">
    <div class="LoginMain">
        <h2 style="font-weight:bold;color:white">登录界面</h2>
        <div class="login_box">
            <span style="color:white;margin-right:10px">用户名:</span>
            <el-input
                placeholder="请输入用户名"
                v-model="user.username"
                style="width:200px"
                clearable
                >
            </el-input>
        </div>
        <div class="login_box">
            <span style="color:white;margin-right:10px">密&nbsp; &nbsp; 码:</span>
            <el-input
                placeholder="请输入密码"
                v-model="user.password"
                style="width:200px"
                type="password"
                clearable
                >
            </el-input>
        </div>
        <div class="login_box">
            <el-radio v-model="radio" label="1" style="color:#fff" checked>管理员</el-radio>
            <el-radio v-model="radio" label="2" style="color:#fff">普通用户</el-radio>
              
        </div>
        <div class="login_box">
             <el-button round @click="loginIn()" >登录</el-button>
        </div>
    </div>
</div>
</template>

<script>
import md5 from "js-md5"
export default {
    name:'LoginView',
    data(){
        return {
            radio:"1",
            user:{
                username:"",
                password:"" 
            },
            
        }
    },
    methods:{
        loginIn(){
            this.$axios
                .post(this.$globalConfig.testUrl + "admin/verifyUser/", {
                username:this.user.username,password:md5(String(this.user.password)),rid:this.radio
                })
                .then(
                (response) => {
                    console.log("请求成功了", response.data);
                    
                    if(response.data.code === 200){
                        sessionStorage.setItem('username',response.data.extend.admin.username)
                        sessionStorage.setItem('password',response.data.extend.admin.password)
                        sessionStorage.setItem('rid',response.data.extend.admin.rid)
                        this.$router.push({
                    		name:'home'
                        });
                    }else{
                        alert(response.data.extend.systemMessage);
                    }

                },
                (error) => {
                    console.log("请求失败了", error.message);
                }
             );
         }
    }
}
</script>

<style scoped>
.LoginViewBody{
    /*弹性布局 让页面元素垂直+水平居中*/
	display: flex;
	justify-content: center;
	align-items: center;
	/*让页面始终占浏览器可视区域总高度*/
	height: 100vh;
	/*背景渐变色*/
	background: linear-gradient(#141e30,#243b55);
}
/* .LoginMain{
    width: 500px;
    height: 400px;
    border: orange 1px solid;
} */
.LoginMain{
	/*弹性布局 让子元素称为弹性项目*/
	display: flex;
	/*让弹性项目垂直排列  原理是改变弹性盒子的主轴方向  
	父元素就是弹性盒子  现在改变后的主轴方向是向下了*/
	flex-direction: column;
	/*让弹性项目在交叉轴方向水平居中  现在主轴的方向是向下  
	交叉轴的方向是与主轴垂直 交叉轴的方向是向右*/
    align-items: center;
    margin-top: 20px;
	width: 400px;
	padding: 40px;
	background-color: rgba(0, 0, 0, 0.2);
	box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);

}
.login_box{
    margin-top: 40px;
    
}
.login_box button{
    width: 100px;
    height: 40px;
    position: relative;
	padding: 10px 20px;
    color: #fff;
    border: none;
    background-color: #0c1929;
    font-size: 14px;
	/*同样加个过渡*/
	transition: all 0.5s;
}
.login_box button:hover{
	color: #fff;
	border-radius: 5px;
	background-color: #03e9f4;
	box-shadow: 0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 100px #03e9f4;

}
</style>